<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <!-- #ifndef MP-WEIXIN -->
        <view class="kaoshi-head">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left" @tap="$navigateBack">
                    <view class="iconfont icon-zuojiantou"></view>
                </view>
                <view class="kaoshi-head-m">{{type == '1' ? '考试' : '模拟考试'}}</view>
            </view>
        </view>
        <!--#endif-->
        <view class="kaoshi-tiku">
            <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                           :down="downOption" :up="upOption">
                <block v-for="(item, index) in list" :key="index">
                    <view class="kaoshi-tiku-content"
                          @tap="choice_exam(item)">
                        <view class="pub-flex-1">
                            <view class="kaoshi-tiku-content-flex">
                                <view class="kaoshi-tiku-content-top">
                                    <view>{{item.exam_name}}</view>
                                </view>
                            </view>
                            <view class="kaoshi-tiku-content-flex">
                                <view class="kaoshi-tiku-content-bottom">
                                    <view class="iconfont icon-shijian1"></view>
                                    <view class="pub-gray">{{item.start_date}} - {{item.end_date}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </mescroll-body>
        </view>
        <view class="tan"
              v-if="showModal">
            <view class="tan-mask"
                  @tap="isShowModal"></view>
            <view class="tan-modal">
                <view class="tan-title">
                    <view>{{current_exam.exam_name}}</view>
                </view>
                <view class="tan-content">
                    <view class="exam-tan-content">
                        <view class="exam-tan-content-flex">
                            <span>题数</span>
                            <view>{{current_exam.num}}题数</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>总分</span>
                            <view>{{current_exam.score}}分</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>参考时间</span>
                            <view>{{current_exam.givetime}}分钟</view>
                        </view>
                        <view class="exam-tan-content-flex">
                            <span>模式</span>
                            <view>{{current_exam.type_text}}</view>
                        </view>
                    </view>
                    <view class="exam-tan-button"
                          @tap="examBegin(current_exam)">开始答题
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import {mapState} from 'vuex'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        num:0,
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                list:[],

                type:0,//1 考试  2 模拟考试
                current_exam: {},
                showModal: false
            }
        },
        onLoad(opts) {
            this.type = opts.from_type
        },
        mounted() {
        },
        computed: {
            ...mapState(['subject']),
        },
        components: {
        },
        onShow() {
        },
        methods: {
            /*上拉加载的回调*/
            async upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条

                let res = await this.$myHttp.post({
                    url: this.type == '1' ? this.$myHttp.urlMap.examinationList : this.$myHttp.urlMap.mockExaminationList,
                    data: {
                        subject_id: this.subject.id,
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin: true
                })
                if(res.code == 1){
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage = data.xxx;
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.total;

                    this.mescroll.endBySize(curPageLen, totalSize);
                    if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(curPageData); //追加新数据
                }else{
                    this.mescroll.endErr()
                }
                // 此处仍可以继续写其他接口请求...
                // 调用其他方法...
            },
            isShowModal: function () {
                this.showModal = !this.showModal
            },
            // 考试开始，向后台发送开始考试的考试id，返回当前考试结束时间
            async examBegin(item){
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.exam_begin,
                    data:{
                        exam_id:item.id
                    },
                    needLogin: true
                });
                if(res.code == 1){
                    let end_time = res.data.endtime
                    this.goto_detail(item,end_time)
                }
            },
            goto_detail(item,end_time) {
                this.showModal = !this.showModal
                this.$openrul('/pages/examination/examinationList/detail?id=' + item.id + '&from_type=' + item.type + '&exam_name=' + item.exam_name + '&title=' + item.type_text + '&end_time=' + end_time)
            },
            choice_exam(item) {
                if(item.is_allow == 1){
                    this.current_exam = item
                    this.$nextTick(() => {
                        this.isShowModal()
                    })
                }else if(item.is_allow == 0){
                    uni.showToast({
                        icon: 'none',
                        title: '您已参加过本场考试，不能重复考试'
                    })
                    return;
                }
            }
        }
    }
</script>

<style>
    page {
        background: #f6f7f9;
    }

    /*考试列表*/
    .kaoshi-tiku {
        background: #fff;
    }

    .kaoshi-tiku-content {
        width: 92%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding: 14px 0;
        border-bottom: solid 1px #f5f5f5;
    }

    .kaoshi-tiku-content-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .kaoshi-tiku-content .icon-arrow {
        padding-left: 13px;
        color: #b3b3b3;
    }

    .kaoshi-tiku-content .icon-suo {
        padding-left: 13px;
        font-size: 24px;
        color: #d0cfcf;
    }

    .kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
        padding-bottom: 6px;
    }

    .index-tiku-content .kaoshi-tiku-content-flex:last-child {
        font-size: 13px;
        color: #b4b3b3;
    }

    .kaoshi-tiku-content-top {
        display: flex;
        align-items: center;
    }

    .kaoshi-tiku-content-top img {
        width: 20px;
        height: 22px;
        margin-right: 10px;
    }

    .kaoshi-tiku-content-bottom {
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .kaoshi-tiku-content-flex .icon-renwu-tuandui {
        margin: 0 3px 0 0;
        color: #d0d0d0;
        font-size: 18px;
    }

    .icon-shijian1 {
        color: #3c7bfc;
        font-size: 18px;
        padding-right: 2px;
    }

    /*弹窗*/
    .tan-mask {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .tan-modal {
        position: fixed;
        z-index: 999;
        width: 80%;
        max-width: 300px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #fff;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
    }

    .tan-title {
        padding:15px 0;
        border-bottom: solid 1px #f4f4f4;
    }

    .tan-title view {
        font-weight: 400;
        font-size: 17px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .tan-content {
        width: 90%;
        margin: 0 auto;
        font-size: 14px;
    }

    .exam-tan-content-flex {
        display: flex;
        width: 91%;
        margin: 0 auto;
        padding: 13px 0;
        border-bottom: solid 1px #f4f4f4;
    }

    .exam-tan-content-flex span {
        color: #767676;
        width: 42%;
        text-align: left;
    }

    .exam-tan-button {
        background: #3c7bfc;
        color: #fff;
        padding: 10px;
        margin: 15px 0;
        border-radius: 4px;
        font-size: 16px;
        display: block !important;
    }
</style>
